<template>
  <div class="root">
    <BetDetailHeader />
    <div class="bet_1">
      <van-tabs v-model="active">
        <van-tab title="两面">
          <BetRowBal title="总和龙虎" rowNum="3" :betRows="betBalls"></BetRowBal>
        </van-tab>
        <van-tab title="单球1~8">
          <BetRowBal title="第一球" rowNum="3" :betRows="betBalls2"></BetRowBal>
          <BetRowBal title="第二球" rowNum="3" :betRows="betBalls2"></BetRowBal>
        </van-tab>
        <van-tab title="第一球">

        </van-tab>
        <van-tab title="第二球">

        </van-tab>
        <van-tab title="第三球">

        </van-tab>
        <van-tab title="第四球">

        </van-tab>
        <van-tab title="第五球">

        </van-tab>
        <van-tab title="第六球">

        </van-tab>
        <van-tab title="第七球">

        </van-tab>
        <van-tab title="第八球">

        </van-tab>
      </van-tabs>
      <div class="footer_ct">
        <div class="default" style="display: flex">
          <div class="left">
            <div class="need_login">请先登录/注册</div>
          </div>
          <div class="right">
            <div class="submit">
              <img class="phone_shake" :src="require('../../assets/images/icon/suijiyizhu.png')">
            </div>
            <div class="shopping_cart">
              <img class="shop_purple" :src="require('../../assets/images/icon/shopping.png')">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import BetRowBal from "./BetRowBal";
  import BetDetailHeader from "./BetDetailHeader";
    export default {
        name: 'backHeader',
        components: {
          BetRowBal,
          BetDetailHeader
        },
        props: ['title'],
        data () {
            return {
                showLastLott: false,
                betBalls: [
                    {label: "总和大", odds: 1.984},
                    {label: "总和小", odds: 1.984},
                    {label: "总和单", odds: 1.984},
                    {label: "总和双", odds: 1.984},
                    {label: "总和尾大", odds: 1.984},
                    {label: "总和尾小", odds: 1.984},
                    {label: "龙", odds: 1.984},
                    {label: "虎", odds: 1.984}
                ],
                betBalls2: [
                    {ballNum: "1", odds: 1.984},
                    {ballNum: "2", odds: 1.984},
                    {ballNum: "3", odds: 1.984},
                    {ballNum: "4", odds: 1.984},
                    {ballNum: "5", odds: 1.984},
                    {ballNum: "6", odds: 1.984},
                    {ballNum: "7", odds: 1.984},
                    {ballNum: "8", odds: 1.984},
                    {ballNum: "9", odds: 1.984},
                    {ballNum: "10", odds: 1.984},
                    {ballNum: "11", odds: 1.984},
                    {ballNum: "12", odds: 1.984},
                    {ballNum: "13", odds: 1.984},
                    {ballNum: "14", odds: 1.984},
                    {ballNum: "15", odds: 1.984},
                    {ballNum: "16", odds: 1.984},
                    {ballNum: "17", odds: 1.984},
                    {ballNum: "18", odds: 1.984},
                    {ballNum: "19", odds: 1.984},
                    {ballNum: "20", odds: 1.984}
                ]
            }
        },
        methods: {
            back () {
                this.$router.go(-1)
            }
        },
        created () {}
    }
</script>

<style lang="less" scoped>

  .root{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
  }


  .bet_1{
    -webkit-animation-duration: .25s!important;
    animation-duration: .25s!important;
    -ms-flex: 1 1;
    flex: 1 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .footer_ct{
    -webkit-box-shadow: 0 -1px 3px rgba(0,0,0,.19);
    box-shadow: 0 -1px 3px rgba(0,0,0,.19);
    overflow: hidden;

    .default{
      display: flex;
      align-items: center;
      height: 100px;
      width: 100%;
      -ms-flex-align: center;
      -webkit-animation-duration: .5s!important;
      animation-duration: .5s!important;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0 28px;
    }

    .default .left{
      height: 100%;
      -ms-flex: 1 1;
      flex: 1 1;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-align: center;
      color: #9d9d9d;
      margin-right: 40px;
      display: flex;
      align-items: center;

      .need_login{
        color: #8454e4;
        text-decoration: underline;
      }
    }

    .default .right{
      height: 84px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      flex: 1 1;
      -ms-flex-pack: end;
      justify-content: flex-end;
      position: relative;
      overflow: hidden;
      padding-right: 1px;

      .submit{
        width: 100%;
        border-radius: 100px;
        background-color: #ff7d2e;
        padding-left: 20px;
        color: #f5f5f5;
        font-size: 12px;
        height: 84px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

        .phone_shake{
          height: 100%;
        }
      }

      .shopping_cart{
        position: absolute;
        z-index: 1;
        right: 1px;
        top: 1px;
        width: 80px;
        height: 80px;
        border-radius: 100%;
        background-color: #fff;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.3);
        box-shadow: 0 1px 4px rgba(0,0,0,.3);

        .shop_purple{
          height: 50%;
          margin-top: 6px;
        }
      }
    }
  }
</style>
